{%- liquid
  assign custom_logo_width = section.settings.custom_logo_width | append: 'px'

  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-inverse'
    else
      assign text_color = ''
  endcase 

  if section.settings.show_full_width_header
    assign header_pc_layout = 'header-full-width'
  else
    case section.settings.desktop_logo_position
      when 'top_center'
        assign header_pc_layout = 'header-top-center'
      when 'top_left' 
        assign header_pc_layout = 'header-top-left'
      when 'middle_left'
        assign header_pc_layout = 'header-middle-left'
    endcase
  endif

  assign offcanvas_pos = 'offcanvas-start'
  case section.settings.mobile_layout
    when 'logo_center'
      assign header_mob_layout = 'header-logo-center'
    when 'tab_first'
      assign header_mob_layout = 'header-tab-first'
    when 'logo_first'
      assign header_mob_layout = 'header-logo-first'
      assign offcanvas_pos = 'offcanvas-end'
      assign drawer_pos = 'drawer-end'
  endcase

  case section.settings.hover_style
    when 'highlight'
      assign hover_style = 'hover-highlight'
    when 'outline'
      assign hover_style = 'hover-outline'
    when 'text_outline'
      assign hover_style = 'hover-text-outline'
  endcase

  case section.settings.sticky_header
    when 'always_sticky'
      assign sticky_number = 1
    when 'never_sticky'
      assign sticky_number = 2
    when 'scroll_sticky'
      assign sticky_number = 0
  endcase

  assign flag = false
  if section.settings.desktop_logo_position != 'middle_left' and section.settings.show_full_width_header == false
    assign logo_margin = 'm-lg-0'
    if section.settings.desktop_logo_position == 'top_left'
      assign flag = true
    endif
  elsif section.settings.show_full_width_header == true
    assign logo_margin = 'm-lg-0'
  endif

  if section.settings.show_separator_line == true
    assign show_underline = 'header-underline'
  endif

-%}

{%- if settings.show_cart -%}
  {%- liquid
    assign show_mini_cart = false
    assign show_drawer_cart = false
    case settings.cart_type
      when 'drawer'
        assign show_mini_cart = false 
        if request.page_type != 'cart'
          assign show_drawer_cart = true
        endif
      when 'mini_cart'
        assign show_drawer_cart = false
        if request.page_type != 'cart'
          assign show_mini_cart = true
        endif
      when 'page'
        assign show_drawer_cart = false
        assign show_mini_cart = false
    endcase
    if show_mini_cart or show_drawer_cart
      assign cart_dropdown_style = 'as-cart-dropdown as-dropdown dropdown cursor-pointer'
    endif
  -%}
{% endif %}

<div class="dropdown-backdrop fade as-dropdown-backdrop"></div>
<div class="header-v3 as-site-header {{ header_pc_layout }} {{ header_mob_layout }} {{ background_color }}  {{ text_color }} {{ show_underline }}">
  <input type="hidden" value="{{ sticky_number }}" class="as-header-sticky-flag">
  <div class="container header-wrap ">
    <div class="header">
      <header-drawer class="d-block d-lg-none header-drawer">
        <button data-bs-toggle="offcanvas" class="btn p-0 rounded-0" data-bs-target="#offcanvasDropdown" aria-controls="offcanvasDropdown"
          >
          <div class="hamburger-box-wrapper">
            <span class="hamburger-box"></span>
            <span class="hamburger-box"></span>
            <span class="hamburger-box"></span>
          </div>
        </button>
        <div class="offcanvas {{ offcanvas_pos }} as-outer-offcanvas outer-canvas {{ background_color }}" tabindex="-1" id="offcanvasDropdown" aria-labelledby="offcanvasDropdown">
          <div class="offcanvas-header hamburger-topbar">
            <button class="text-reset btn p-0 border-0" data-bs-dismiss="offcanvas" aria-label="Close">
              {%- render 'icon-close' -%}
            </button>
            {%- if settings.show_cart -%}
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">
              <cart-icon-bubble class="d-block cart-icon-bubble-wrapper">
                <a {% if show_drawer_cart == false %}href="{{ routes.cart_url }}" {%endif%} 
                  class="" 
                  id="as-cart-icon-bubble" 
                  data-id="cart-icon-bubble"
                  {% if show_drawer_cart %} data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight" {% endif %}>
                  {% render 'cart-icon-bubble' %}
                </a>
              </cart-icon-bubble>
            </h5>
            {%- endif -%}
          </div>
          {%- if section.settings.main_menu != blank -%}
          <div class="offcanvas-body hamburger-inner-content container">
            <ul class="list-unstyled drawer-nav as-drawer-content {{ drawer_pos }}">
              {%- if settings.show_search and section.settings.mobile_layout == 'logo_center' -%}
                <div class="cursor-pointer search-form-content search-modal-trigger" data-bs-toggle="modal" data-bs-target="#searchModal">
                  <form class="search-form ">
                    <div class="d-flex justify-content-center flex-wrap w-100">
                      <div class="input-text">
                        <span class="search-icon active">
                          {% render 'icon-search' %}
                        </span>
                        <input
                          type="text"
                          autocomplete="off" 
                          value="" 
                          class="form-control cursor-pointer"
                          placeholder="{{ 'sections.custom_search.placeholder' | t }}" 
                          aria-label="{{ 'sections.custom_search.placeholder' | t }}"
                          disabled
                          >
                      </div>
                    </div>
                  </form>
                </div>                
              {%- endif -%}
              {%- for link in section.settings.main_menu.links -%}
                <li>
                  {%- if link.levels == 0 -%}
                    <a {% render 'link', link: link.url %} class="nav-link drawer-nav-link" href="{{ link.url }}">
                      <span>{{ link.title }}</span>
                    </a>
                  {% elsif link.levels >= 1 %}
                    <a data-bs-target="#offcanvasSubmenu-{{ forloop.index }}" aria-controls="offcanvasSubmenu-{{ forloop.index }}" class="nav-link drawer-nav-link as-submenu-trigger">
                      <span>{{ link.title }}</span>
                      <span>{%- render 'icon-chevron-right' -%}</span>
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
            {%- for link in section.settings.main_menu.links -%}
              {%- if link.levels >= 1 -%}
                {%- liquid
                  assign is_mega_menu = false
                  assign mega_menu_settings = section.blocks | where: "type", "mega_menu" | map: "settings"
                  for sub_menu_item in link.links
                    assign current_mega_menu = mega_menu_settings | where: "link", sub_menu_item.url
                    assign current_menu_not_blank = current_mega_menu | where: "img" | first
                    if current_menu_not_blank
                      assign is_mega_menu = true
                      break
                    endif
                  endfor
                -%}
                <div data-bs-backdrop="false" class="offcanvas {{ offcanvas_pos }} submenu-offcanvas as-submenu-content {{ background_color }}" tabindex="-1" id="offcanvasSubmenu-{{ forloop.index }}" aria-labelledby="offcanvasSubmenu-{{ forloop.index }}">
                  <div class="offcanvas-header submenu-topbar">
                    <button class="text-reset as-submenu-close btn p-0 fw-normal border-0 d-flex align-items-center" aria-label="Close">
                      {%- render 'icon-chevron-left' -%}
                      <span>{{ 'sections.header.back' | t }}</span>
                    </button>
                  </div>
                  <div class="offcanvas-body submenu-body">
                    <div class="submenu-title">{{ link.title }}</div>
                    <ul class="list-unstyled">
                      {% for sublink in link.links %}
                        <li class="">
                          <a {% render 'link', link: sublink.url %} class="nav-link drawer-subnav-link" href="{{ sublink.url }}" >{{ sublink.title }}</a>
                        </li>
                      {% endfor %}
                    </ul>
                    {% comment %}找到第一个配置了图片的megamenu{% endcomment %}
                    {%- if is_mega_menu -%}
                      {% assign flag = false %}
                      {% for sublink in link.links %}
                        {% unless flag %}
                          {% for mega_menu in mega_menu_settings %}
                            {% if mega_menu.link == sublink.url %}
                              {% if mega_menu.img != blank %}
                                <div class="position-relative drawer-mega-menu-content">
                                  <a class="stretched-link" href="{{ sublink.url }}"></a>
                                  <div class="drawer-mega-menu-title">{{ sublink.title }}</div>
                                  <figure class="drawer-mega-menu-img {% unless section.settings.adapt_to_image_size %}fixed-ratio ratio ratio-3x2{% endunless %}">
                                    <picture>
                                      <img 
                                        {% if  section.settings.adapt_to_image_size %}
                                          width="{{ mega_menu.img.width }}" height="{{ mega_menu.img.height }}"
                                        {% else %}
                                          width="{{ mega_menu.img.width }}" height="{{ mega_menu.img.width | divided_by: 1.5 }}"
                                        {% endif %}
                                        srcset="{{ mega_menu.img | img_url: '330x220' }} 1x, {{ mega_menu.img | img_url: '330x220', scale: 2 }} 2x"
                                        src="{{ mega_menu.img | img_url: 'master' }}"
                                        loading="lazy"
                                        alt="{{ mega_menu.img.alt | escape }}">
                                    </picture>
                                  </figure>
                                  <div class="drawer-mega-menu-text">{{ mega_menu.optional_title }}</div>
                                </div>
                                {% assign flag = true %}
                                {% break %}
                              {% endif %}
                            {% endif %}
                          {% endfor %}
                        {% endunless %}
                      {% endfor %}
                    {%- endif -%}
                  </div>
                </div>
              {%- endif -%}
            {%- endfor -%}
          </div>
          {%- endif -%}
        </div>
      </header-drawer>

      {%- if section.settings.desktop_logo_position == 'top_center' -%}
        {%- if settings.show_search -%}
          <div class="d-none d-lg-block">
            <a class="cursor-pointer header-icon px-0" data-bs-toggle="modal" data-bs-target="#searchModal">
              {%- render 'icon-search' -%}
            </a>
          </div>
        {%- endif -%}
      {%- endif -%}

      {%- if request.page_type == 'index' -%}
        <h1 class="header-heading m-0">
      {%- endif -%}
        <a class="header-heading-link d-inline-block text-decoration-none {{ logo_margin }}" href="{{ routes.root_url }}">
          {%- if section.settings.logo != blank -%}
            {%- assign image_size = section.settings.custom_logo_width | append: 'x' -%}
            {%- liquid 
              assign response_height = section.settings.custom_logo_width | times: section.settings.logo.height | divided_by: section.settings.logo.width
            -%}
            <img width="{{ section.settings.logo.width }}" height="{{ section.settings.logo.height }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
              src="{{ section.settings.logo | img_url: image_size }}"
              loading="lazy"
              alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
              {% if response_height <= 40 %}style="width: {{ custom_logo_width }}; height: auto;"{% endif %}
              {% if response_height > 40 %}style="height: 40px; width: auto;"{% endif %}
            >
          {%- else -%}
            <span class="h6 mb-0">{{ shop.name }}</span>
          {%- endif -%}
        </a>
      {%- if request.page_type == 'index' -%}
        </h1>
      {%- endif -%}
      
      {%- if section.settings.main_menu != blank -%}
      <nav class="header-inline-menu d-none d-lg-block ">
        <ul class="nav">
          {%- for link in section.settings.main_menu.links -%}
            <li class="nav-item {% if link.levels >= 1 %}as-dropdown{% endif %}">
              {%- if link.levels == 0 -%}
                <a {% render 'link', link: link.url %} class="nav-link {{ hover_style }}" href="{{ link.url }}">
                  <span>{{ link.title }}</span>
                </a>
              {% elsif link.levels >= 1 %}
                {% comment %} 判断当前二级菜单是否为Mega菜单，并记录匹配的菜单项有多少 {% endcomment %}
                {%- liquid
                  assign is_mega_menu = false
                  assign mega_menu_settings = section.blocks | where: "type", "mega_menu" | map: "settings"

                  for sub_menu_item in link.links
                    assign current_mega_menu = mega_menu_settings | where: "link", sub_menu_item.url | first
                    assign current_menu_not_blank = current_mega_menu | where: "img" | first
                    if current_menu_not_blank
                      assign is_mega_menu = true
                      break
                    endif
                  endfor
                -%}
                {%- if is_mega_menu -%}
                <details-disclosure>
                  <div class="with-mega-menu-dropdown as-details-toggle">
                    <a href="javascript:void(0);"  class="nav-link {{ hover_style }}">
                      <span>{{ link.title }}</span>
                      <span>
                        {% render 'icon-chevron-down' %}
                      </span>
                    </a>
                    <mega-dropdown class="dropdown-menu mega-menu-dropdown {{ background_color }} as-details-content">
                      <div class="container">
                        <div class="dropdown-container">
                          <div class="d-flex">
                            <div class="dropdown-content">
                              <div class="mega-menu-heading">{{ link.title }}</div>
                              <ul class="list-unstyled">
                                {% for sublink in link.links %}
                                  <li class="menu-item">
                                    <a {% render 'link', link: sublink.url %} class="as-megamenu-link menu-link {% if forloop.last %}as-last{% endif %}" href="{{ sublink.url }}" >{{ sublink.title }}</a>
                                  </li>
                                {% endfor %}
                              </ul>
                            </div>
                            <div class="dropdown-spotlight">
                              {% for sublink in link.links %}
                                <div class="as-megamenu-info position-relative {% unless forloop.first %}d-none{% endunless %}">
                                  {% for mega_menu in mega_menu_settings %}
                                    {% if mega_menu.link == sublink.url %}
                                      {% if mega_menu.img != blank %}
                                        <a class="stretched-link" href="{{ sublink.url }}"></a>
                                        <div class="mega-menu-subhead">{{ sublink.title }}</div>
                                        <figure class="mega-menu-img {% unless section.settings.adapt_to_image_size %}fixed-ratio ratio ratio-3x2{% endunless %}">
                                          <picture>
                                            <img 
                                              {% if  section.settings.adapt_to_image_size %}
                                                width="{{ mega_menu.img.width }}" height="{{ mega_menu.img.height }}"
                                              {% else %}
                                                width="{{ mega_menu.img.width }}" height="{{ mega_menu.img.width | divided_by: 1.5 }}"
                                              {% endif %}
                                              srcset="{{ mega_menu.img | img_url: '330x220' }} 1x, {{ mega_menu.img | img_url: '330x220', scale: 2 }} 2x"
                                              src="{{ mega_menu.img | img_url: 'master' }}"
                                              loading="lazy"
                                              alt="{{ mega_menu.img.alt | escape }}">
                                          </picture>
                                        </figure>
                                        <div class="mega-menu-text">{{ mega_menu.optional_title }}</div>
                                      {% endif %}
                                      {% break %}
                                    {% endif %}
                                  {% endfor %}
                                </div>
                              {% endfor %}
                            </div>
                          </div>
                        </div>
                      </div>
                    </mega-dropdown>
                  </div>
                </details-disclosure>
                {%- else -%}
                <details-disclosure>
                  <div class="with-default-dropdown as-details-toggle">
                    <a href="javascript:void(0);"  class="nav-link {{ hover_style }} ">
                      <span>{{ link.title }}</span>
                      <span>
                        {% render 'icon-chevron-down' %}
                      </span>
                    </a>
                    <ul class="dropdown-menu default-dropdown {{ background_color }} as-details-content">
                      {% for sublink in link.links %}
                        <li>
                          <a {% render 'link', link: sublink.url %} class="dropdown-item menu-item {% if forloop.last %}as-last{% endif %}" href="{{ sublink.url }}" >{{ sublink.title }}</a>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                </details-disclosure>
                {%- endif -%}
              {%- endif -%}
            </li>
          {%- endfor -%}
        </ul>
      </nav>
      {%- endif -%}

      <div class="header-icons d-flex">
        {%- if settings.show_search -%}
          <div class="nav-item {% if section.settings.mobile_layout == 'logo_center' %}d-none d-lg-block{% endif %} {% if section.settings.desktop_logo_position == 'top_center' %}d-lg-none{% endif %}">
            <a class="header-icon cursor-pointer" data-bs-toggle="modal" data-bs-target="#searchModal">
              {%- render 'icon-search' -%}
            </a>
          </div>
        {%- endif -%}
        {%- if settings.show_cart -%}
          <div class="nav-item me-2 me-md-3 {{ cart_dropdown_style }}">
            <details-disclosure>
            <div class="with-mini-cart-dropdown as-details-toggle">
              <cart-icon-bubble class="d-block cart-icon-bubble-wrapper">
                <a {% if show_drawer_cart == false %}href="{{ routes.cart_url }}"{% endif %} 
                  {% if show_drawer_cart %} data-bs-toggle="offcanvas" data-bs-target="#drawer-cart-items" aria-controls="offcanvasRight" {% endif %}
                  class="header-icon " 
                  id="as-cart-icon-bubble-web" 
                  data-id="cart-icon-bubble">
                  {% render 'cart-icon-bubble' %}
                </a>
              </cart-icon-bubble>
              {% if show_mini_cart %}
                <mini-cart 
                  id="mini-cart-items" 
                  class="as-details-content mini-cart-container dropdown-menu position-absolute end-0 overflow-hidden bg-default border-0 py-0 lh-base text-wrap"
                  data-id="mini-cart">
                  {% render 'mini-cart' %}
                </mini-cart>
              {% endif %}
            </div>
            </details-disclosure>
          </div>
        {%- endif -%}

        {% if shop.customer_accounts_enabled %}
          <div class="nav-item {% if customer %}as-dropdown{% endif %}">
            <details-disclosure>
            <div class="with-default-dropdown as-details-toggle">
              <a class="header-icon flex-row text-decoration-none" href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}">
                <span class="">{% render 'icon-user' %}</span>
                {% if customer.name %}
                  <span>{{ customer.name | truncate: 12 }}</span>
                {% endif %}
              </a>
              {%- if customer -%}
              <ul class=" dropdown-menu default-dropdown {{ background_color }} user-dropdown as-details-content">
                <li>
                  <a class="dropdown-item menu-item" href="{{ routes.account_url }}">{{ 'customer.account.my_orders' | t }}</a>
                </li>
                <li>
                  <a class="dropdown-item menu-item" href="{{ routes.account_addresses_url }}">{{ 'customer.account.my_addresses' | t }}</a>
                  <hr class="my-2">
                </li>
                <li>
                  <a class="dropdown-item menu-item as-last" href="{{ routes.account_logout_url }}">{{ 'customer.customer.log_out' | t }}</a>
                 </li>
              </ul>
              {%- endif -%}
            </div>
            </details-disclosure>
          </div>
        {% endif %}
      </div>
      {%- if settings.show_search -%}
        <details-modal>
          <div class="search-modal-overlay as-modal-overlay d-none d-lg-block"></div>
            {% render 'search-modal', background_color: background_color, text_color: text_color %}
        </details-modal>
      {%- endif -%}
    </div>
  </div>
</div>

{%- if settings.show_cart -%}
  {%- if settings.add_to_cart_action == 'show_added_msg' and show_mini_cart -%}
    <div class="cart-notification-container container">
      {% render 'cart-notification', class: 'd-none d-md-block' %}
    </div>
  {%- endif -%}
{%- endif -%}


{% schema %}
  {
    "name": "Header",
    "tag": "header",
    "class": "shopify-section-header as-shopify-header",
    "settings": [
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }  
        ],
        "default": "black"
      },
      {
        "label": "Logo image",
        "type": "image_picker",
        "id": "logo"
      },
      {
        "type": "range",
        "id": "custom_logo_width",
        "min": 50,
        "max": 250,
        "step": 10,
        "default": 70,
        "unit": "px",
        "label": "Custom logo width"
      },
      {
        "type": "link_list",
        "label": "Main menu",
        "id": "main_menu",
        "default": "main-menu"
      },
      {
        "type": "select",
        "id": "desktop_logo_position",
        "label": "Desktop logo position",
        "options": [
          {
            "value": "middle_left",
            "label": "Middle left"
          },
          {
            "value": "top_left",
            "label": "Top left"
          },
          {
            "value": "top_center",
            "label": "Top center"
          }  
        ],
        "default": "middle_left"
      },
      {
        "type": "checkbox",
        "id": "show_full_width_header",
        "label": "Show full width header on Desktop",
        "default": false,
        "info": "Logo is fixed on the left side."
      },
      {
        "type": "select",
        "id": "mobile_layout",
        "label": "Mobile layout",
        "options": [
          {
            "value": "logo_center",
            "label": "Logo on center"
          },
          {
            "value": "tab_first",
            "label": "Tab first"
          },
          {
            "value": "logo_first",
            "label": "Logo first"
          }  
        ],
        "default": "logo_center"
      },
      {
        "type": "select",
        "id": "hover_style",
        "label": "Hover style",
        "options": [
          {
            "value": "highlight",
            "label": "Highlight"
          },
          {
            "value": "outline",
            "label": "Outline"
          },
          {
            "value": "text_outline",
            "label": "Text outline"
          }  
        ],
        "default": "highlight"
      },
      {
        "type": "checkbox",
        "id": "show_separator_line",
        "label": "Show separator line",
        "default": false
      },
      {
        "type": "select",
        "id": "sticky_header",
        "label": "Sticky header",
        "options": [
          {
            "value": "always_sticky",
            "label": "Always sticky"
          },
          {
            "value": "scroll_sticky",
            "label": "When customers scroll up"
          },
          {
            "value": "never_sticky",
            "label": "Never"
          }  
        ],
        "default": "never_sticky"
      },
      {
        "type": "checkbox",
        "id": "adapt_to_image_size",
        "label": "Adapt to Image Size",
        "default": false,
        "info": "It works on images in mega menu"
      }
    ],
    "blocks": [
      {
        "type": "mega_menu",
        "name": "Mega menu",
        "settings": [
          {
            "type": "paragraph",
            "content": "Add an image for the specified navigation"
          },
          {
            "type": "image_picker",
            "id": "img",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Fill in the URL which need add an image.Please make sure that the link you already exists in the selected navigation, otherwise this block will not be shown."
          },
          {
            "type": "text",
            "id": "optional_title",
            "label": "Optional title"
          }  
        ]
      }
    ]
  }
{% endschema %}